<template>
  <div>
    <div>
      <div>
        <el-date-picker
          v-model="localDate"
          :default-value="localDate"
          type="date"
          value-format="yyyy-MM-dd"
          @change="getData"
          placeholder="选择日期">
        </el-date-picker>
      </div>
    </div>
    <div class="admin-content">
      <el-card class="admin-card"  v-for="(room,index) in roomData"
               :key="index">
        <div slot="header" class="clearfix">
          <span style="display: flex;justify-content: center;font-weight:bold"> {{room.name}}会议室</span>
        </div>
        <div>
          <div style="margin-top: 10px">
            <span>时间段</span>
            <span style="float: right">状态</span>
          </div>

            <div style="margin-top: 20px">
              <span>10:00 ~ 12:00</span>
              <el-button type="text"  style="color: #13ce66;float: right" v-if="applyRecord[room.name + '' + 1] === undefined"
                         @click="clickApply(room.id,room.name,1)" :key="1">
                可预约
              </el-button>


              <el-button type="text"  style="color: red;float: right" v-if="applyRecord[room.name + '' + 1]" disabled :key="2">
                已预约
              </el-button>
            </div>

          <div style="margin-top: 20px">
            <span>14:00 ~ 16:00</span>
            <el-button type="text"  style="color: #13ce66;float: right" v-if="applyRecord[room.name + '' + 2] === undefined"
                       @click="clickApply(room.id,room.name,2)">
              可预约
            </el-button>


            <el-button type="text"  style="color: red;float: right" v-if="applyRecord[room.name + '' + 2]" disabled>
              已预约
            </el-button>
          </div>

          <div style="margin-top: 20px">
            <span>17:00 ~ 19:00</span>

              <el-button type="text"  style="color: #13ce66;float: right" v-if="applyRecord[room.name + '' + 3] === undefined"
                         @click="clickApply(room.id,room.name, 3)">
                可预约
              </el-button>
              <el-button type="text"  style="color: red;float: right" v-if="applyRecord[room.name + '' + 3]" disabled>
                已预约
              </el-button>
          </div>
        </div>
      </el-card>
    </div>
    <div>
      <el-dialog
        title="会议室申请"
        :visible.sync="applyVisible"
        width="30%"
        append-to-body
      >
        <div>
          <el-form
            :model="applyData"
            ref="ruleForm"
            label-width="100px"
            class="demo-ruleForm"
          >
            <el-form-item label="申请人" prop="adminId">
              <el-input type="text" v-model="applyData.adminName" disabled></el-input>
            </el-form-item>

            <el-form-item label="部门" prop="departmentId">
              <!--              <el-input type="text" v-model="leaveApplyName" disabled></el-input>-->
              <el-select v-model="applyData.depId" placeholder="请选择" style="width: 100%" disabled>
                <el-option
                  v-for="item in depOptions"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>

            <el-form-item label="会议室" prop="adminId">
              <el-select v-model="applyData.roomId" placeholder="请选择" style="width: 100%" disabled>
                <el-option
                  v-for="item in roomData"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                  disabled
                >
                </el-option>
              </el-select>
            </el-form-item>

            <el-form-item label="时段" prop="adminId">
              <el-select v-model="applyData.roomTime" placeholder="请选择" style="width: 100%" disabled>
                <el-option
                  v-for="item in timeOptions"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                  disabled
                >
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="预约日期" prop="leaveDate">
              <el-date-picker
                disabled
                v-model="applyData.applyDate"
                type="date"
                value-format="yyyy-MM-dd"
                start-placeholder="开始日期"
                style="width: 100%"
              >
              </el-date-picker>
            </el-form-item>
          </el-form>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="applyVisible = false">取 消</el-button>
          <el-button type="primary" @click="addApply">确 定</el-button>
        </span>
      </el-dialog>
    </div>

  </div>
</template>

<script>
import roomAPI from "../../../api/room";
import employeeAPI from "../../../api/employee";
export default {
  name: "SysAdmin",
  data(){
    return{
      applyData:{
        adminId: JSON.parse(sessionStorage.getItem('userInfo')).id,
        adminName: JSON.parse(sessionStorage.getItem('userInfo')).name,
        depId: JSON.parse(sessionStorage.getItem('userInfo')).id
      },
      roomData:[], // 会议室数据
      applyRecord:{}, // 会议室预约数据
      first:1,
      applyVisible:false,
      depOptions:[],
      timeOptions:[
        {id: 1, name:"上午"},
        {id: 2, name:"下午"},
        {id: 3, name:"晚上"},
      ],
      localDate: new Date().getFullYear()+'-'+ '0' + (new Date().getMonth()+1) + '-' + new Date().getDate(),

    }
  },
  methods:{
    getData(){
      // 获取会议室
      this.getRoomList();
    },
    // 获取会议室
    getRoomList(){
      roomAPI.getRoomList().then(res => {
        if (res){
          this.roomData = res.data.obj;
          // 获取所有预约数据
          this.getApplyRecord(this.roomData)
          // console.log(this.applyRecord);
        }
      })
   //   this.applyVisible = true
      setTimeout(() => {
        this.$forceUpdate()
      }, 500);
    },
    // 遍历会议室，获取所有预约数据
    getApplyRecord(data) {
      this.applyRecord = []
      data.forEach((item, index) => {
        console.log(this.localDate);
        roomAPI.getApplyRecord(item.id, this.localDate).then(res => {
          if (res){
            res.data.obj.forEach((item2) => {
              let name = item2.roomName + "" + item2.roomTime
              this.applyRecord[name] = item2
              console.log("232");
              console.log(this.applyRecord);
            })
          }
        })
      });

    },
    clickApply(roomId, roomName, roomTime){
      this.applyVisible = true
      this.applyData.roomId = roomId
      this.applyData.roomTime = roomTime
      this.applyData.roomName = roomName
      this.applyData.applyDate = this.localDate
    },
    addApply(){
      roomAPI.addApply(this.applyData).then(res => {
        if (res) {
          this.getData();
          this.applyVisible = false
        }
      })
    },
    // 获取所有部门
    getAllDeps(){
      employeeAPI.getAllDeps().then(res => {
        // this.depOptions = res.data;
        this.getDep(res.data); // 递归
      })
    },
    // 递归操作
    getDep(data){
      data.map(item => {
        this.depOptions.push(item)
        if (item.children.length === 0){
          return ;
        }
        this.getDep(item.children)
      })
    },
  },
  mounted() {
    this.getData();
    this.getAllDeps()
  },


}
</script>

<style scoped>
  .admin-content{
    flex-wrap: wrap;
    justify-content: space-around;
    display: flex;
    margin-bottom: 20px;
  }
  .admin-card{
    width: 350px;
    margin-top: 30px;
  }
  .userface-img{
    width: 72px;
    height: 72px;
    border-radius: 72px;
  }
  .img-container{
    width: 100%;
    display: flex;
    justify-content: center;
  }
  .userinfo-container{
    font-size: 12px;
  }
  .status {
    color: #13ce66;
    float: right
  }
  .status2 {
    color: red;
    float: right
  }

</style>
